<template>
	<div id='editAdminClass'>
		<div class="breadcrumb">
			<img src="../../../../static/img/campus_icon_1.png" class="head_img">
			<span class="title" @click="goCancel">院系管理</span>/ 班级列表
		</div>
		<div class="list">
			<div class="list_head">
				<span class="head_name">班级列表</span>
				<el-button class="save" type="primary" @click="updateClassName(1)">添加班级</el-button>
				<el-button class="cancel" type="primary" @click="goCancel">返回</el-button>
			</div>
			<el-table :data="list">
				<el-table-column prop="className" label="班级名称" width="200px">
				</el-table-column>
				<el-table-column prop="teacherName" label="班主任" width="110px">
				</el-table-column>
				<el-table-column prop="stuRegistNum" label="学生人数" width="110px">
				</el-table-column>
				<el-table-column align="right">
					<template scope="scope">
						<el-button size="small" type="text" @click.stop="classDet(scope.row)">班级详情</el-button>
						<el-button size="small" type="text" @click.stop="updateClassName(0,scope.row)">修改班级名称</el-button>
						<el-button size="small" type="text" @click.stop="openDia(scope.row)">更换班主任</el-button>
						<el-button size="small" type="text" @click.stop="deleteClass(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<el-dialog :title="titleName" :visible.sync="dialogFormVisible">
			<el-input v-model="className" @keyup.enter.native="confirmOk" placeholder="请输入班级名称"></el-input>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="confirmOk">确定</el-button>
				<el-button type="primary" @click="dialogFormVisible = false" :plain="true">取 消</el-button>
			</div>
		</el-dialog>
		<el-dialog title="更换班主任" :visible.sync="dialogVisible">
			<el-select v-model="mid" placeholder="全部老师" filterable>
				<el-option v-for="item in teacherLists" :label="item.name" :value="item.id" :key="item.id"></el-option>
			</el-select>

			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="changeTecher">确定</el-button>
				<el-button type="primary" @click="dialogVisible = false" :plain="true">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import { mapState, mapActions } from "vuex";

	export default {
		data() {
			return {
				list: [],
				cid: '',
				mid: "",
				departId: '',
				department: "",
				titleName: "",
				className: "",
				classId: "",
				teacherLists: [],
				dialogVisible: false,
				dialogFormVisible: false
			};
		},
		computed: mapState({ user: state => state.user }),
		mounted() {
			this.department = this.$util.getStore("departName");
			this.departId = this.$util.getStore("departId") * 1;
			this.getClassList();
			this.getTeacher();
		},
		methods: {
			goCancel() {
				location.href = "/#/departManage";
			},
			getClassList() {
				let url = this.$util.domain + "/campusadminapi/v2/gradeclass/allgradeclass";
				this.list = [];

				this.$http({
					url,
					method: "POST",
					body: JSON.stringify({
						id: this.$util.getStore("departId") * 1,
						rootUnid: parseInt(this.user.rootUnid)
					})
				}).then(response => {
					if (response.data.error == 10000) {
						let list = response.data.data;
						if (list && list.length > 0) {
							list.forEach(item => {
								this.list.push({
									classId: item.classId,
									className: item.className,
									teacherName: item.teacherName,
									stuRegistNum: item.stuRegistNum
								})
							});

						}
					}
				});
			},
			// 获取老师列表
			getTeacher() {
				this.teacherLists = [{ id: 0, name: "全部老师" }];
				let url = this.$util.domain + "/campusadminapi/v1/tools/teachers";

				this.$http({
					url,
					method: "GET"
				}).then(response => {
					if (response.data.error == 10000) {
						// 老师列表
						let teacherList = response.data.data;
						if (teacherList && teacherList.length) {
							this.mid = teacherList[0].mid;
							for (let i = 0; i < teacherList.length; i++) {
								this.teacherLists.push({
									id: teacherList[i].mid,
									name: teacherList[i].teacherName
								});
							}
						}
					}
				});
			},
			updateClassName(type, row) {
				this.dialogFormVisible = true;
				if (type == 1) {
					this.titleName = "添加班级";
					this.className = "";
					this.classId = 0;
				}
				if (type == 0 && row) {
					this.titleName = "修改班级名称";
					this.className = row.className;
					this.classId = row.classId;
				}
			},
			confirmOk() {
				let url = this.$util.domain + "campusadminapi/v2/gradeclass/editgradeclass";
				
				if(!this.className || !this.className.trim()){
					this.$util.errorMsg('班级名称不能为空！');
					return ;
				}
				this.$http({
					url,
					method: "POST",
					body: JSON.stringify({
						classId: this.classId,
						departId: this.departId,
						rootUnid: this.user.rootUnid,
						className: this.className.trim()
					})
				}).then(response => {
					this.dialogFormVisible = false;
					let tName = this.titleName == "添加班级" ? "班级添加成功" : "班级名称修改成功"
					if (response.data.error == 10000) {
						this.$util.successMsg(tName)
						this.getClassList();
					} else {
						this.$util.errorMsg(response.data.message);
					}
				});
			},
			//打开更换班主任对话框
			openDia(row) {
				this.cid = row.classId;
				this.dialogVisible = true;
			},
			changeTecher() {
				let url = this.$util.domain + "/campusadminapi/v2/gradeclass/editteacher";
				this.$http({
					url,
					method: "POST",
					body: JSON.stringify({
						mid: this.mid * 1,
						classId: this.cid * 1,
					})
				}).then(response => {
					if (response.data.error == 10000) {
						this.getClassList();
						this.dialogVisible = false;
						this.$util.successMsg("更换班主任成功");
					} else {
						this.$util.errorMsg(response.data.message);
					}
				});
			},
			// 删除班级
			deleteClass(row) {
				this.$confirm("您确定要删除“" + row.className + "”吗？", "温馨提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消"
				}).then(() => {
					let url = this.$util.domain + "/campusadminapi/v2/gradeclass/deletegradeclass";

					this.$http({
						url,
						method: "POST",
						body: JSON.stringify({
							classId: parseInt(row.classId)
						})
					}).then(response => {
						if (response.data.error == 10000) {
							this.$util.successMsg("删除成功");
							this.getClassList();
						} else {
							this.$util.errorMsg(response.data.message);
						}
					});
				});
			},
			//班级详情
			classDet(row) {
				this.$util.setStore("classId", row.classId);
				this.$util.refreshTo("/#/classList");
			}
		}
	};
</script>

<style scoped>
	#editAdminClass {
		padding-top: 80px;
		height: calc(100% - 100px);
	}

	.title {
		color: #0398ff;
	}
</style>